import User from "@/pages/user";
import { Modal } from "antd";
import { forwardRef, useImperativeHandle, useRef, useState } from "react";
import './index.scss'
import type { SelectUserModalPropsType } from "@/types";

const SelectUserModal = forwardRef((props: SelectUserModalPropsType,ref) => {
    // 表单标识
    const [isModalOpen,setIsModalOpen] = useState(false);
    // 接收选中的用户数据
    const [selectUserDatas,setSelectUserDatas] = useState<User[]>([]);
    // 用户组件标识
    const userRef = useRef(null);
    /** 选择用户弹窗确认回调  */
    const handleConfirm = async () => {
        // 获取选中的用户数据
        const returnData: User[] = await userRef.current.handleReturn();
        if (returnData.length === 0) {
            return;
        }
        // 将选中的用户数据回传父组件
        if (props && props.hanleSelectUser) {
            props?.hanleSelectUser(returnData);
        }
        setIsModalOpen(false);
    }

    /** 选择用户弹窗点击取消回调  */
    const handleClose = () => {
        setIsModalOpen(false);
    }

    /** 关闭用户弹窗的回调  */
    const handleAfterClose = () => {
        console.log("关闭选择用户弹窗的回调");
        // 重置父组件传入的选中用户数据
        setSelectUserDatas([]);
        // 重置用户组件
        userRef.current.reset();
    }
    
    /**
     * 打开弹窗
     * @param selectDataIds 选中的表格数据id
     */
    const open = (selectDatas?: User[]) => {
        // 设置选中的数据
        if (selectDatas) {
            // 这里更新一下传递的数据引用，作用：在传递到子组件时，能被useEffect监听到引用变化然后回显选中的数据
            const newData = JSON.parse(JSON.stringify(selectDatas));
            setSelectUserDatas(newData);   
        }
        // 弹出用户弹窗
        setIsModalOpen(true);
    }

    useImperativeHandle(ref, () => ({
        open: open
    }));

    return (
        <Modal 
            afterClose={handleAfterClose}
            className="select-interviewer-modal"
            title={props.title ? props?.title : '选择用户'}
            closable={{ 'aria-label': 'Custom Close Button' }}
            open={isModalOpen}
            onOk={handleConfirm}
            onCancel={handleClose}
            okText='确认'
            cancelText='取消'
            width={'80%'}
        >
            <User ref={userRef} isOutOpen={true} selectUserDatas={selectUserDatas}></User>
        </Modal>
    )

});

export default SelectUserModal;